<template>
  <div class="goodBox" v-if="category.length > 0" @click="touchList" :style="{ '--colorOpacity': `${themeBaseColorOpacity}` }">
    <div class="goodBox_left">
      <div class="oneCate" @click="scrollToSection(item)" v-for="(item, ind) in category" :key="ind" :class="[ind == oneInd ? 'oneSelect' : '']">
        <div class="txt" :class="[ind == oneInd ? 'oneSelect_after' : '']">{{ item.name }}</div>
      </div>
    </div>
    <div
      class="goodBox_right"
      :class="[stickyShow ? 'dext' : 'dex']"
      @touchmove="handleTouchMove"
      @touchstart="handleTouchStart"
      @touchend="handleTouchEnd"
      ref="goodBox_right"
      @scroll="fnHandleScroll"
    >
      <!-- <div v-if="stickyShow" style="height: 2.8125rem;width:100%;"></div> -->
      <div v-for="(classCate, indexOne) in category" style="position: relative;" :key="indexOne" :id="classCate.id" ref="showCate">
        <div class="aPos" v-if="moreCate == classCate.id"></div>
        <div class="pos" :class="[moreCate == classCate.id ? 'posAll' : '']" ref="posA">
          <div class="isSelectOneCate">{{ classCate.name }}</div>
          <div class="twoFiltrate">
            <div class="twoFiltrate_left" :class="[moreCate == classCate.id ? 'twoFiltrate_left_PP' : '']">
              <!-- <div class="twoFiltrate_box">全部</div> -->
              <div
                class="twoFiltrate_box"
                :class="[forTwoId(indx) ? 'twoFiltrate_box_Select' : '', moreCate == classCate.id ? 'twoFiltrate_box_PP' : '']"
                v-for="(twoItem, indx) in classCate.has_many_children"
                :key="indx"
                @click="scrollToTwoCate(twoItem, indx, indexOne)"
              >
                {{ twoItem.name }}
              </div>
            </div>
            <div class="posMoreBtn" @click="tapMore(classCate.id)">
              <van-icon name="arrow-up" v-if="moreCate == classCate.id" />
              <van-icon name="arrow-down" v-else />
            </div>
          </div>
        </div>
        <div class="cateGood" :id="twoCate.id" ref="twoCateRefs" v-for="twoCate in classCate.has_many_children" :key="twoCate.id">
          <div class="isTwoCateName">{{ twoCate.name }}</div>
          <div class="goodList" v-for="(twoCateGood, index) in twoCate.good" :key="index">
            <div class="left" @click="tapGood(twoCateGood)">
              <img :src="twoCateGood.thumb" alt="" v-lazy="twoCateGood.thumb ? twoCateGood.thumb : require('../../../assets/images/loading.jpg')" />
            </div>
            <div class="right">
              <div class="right_top" @click="tapGood(twoCateGood)">{{ twoCateGood.title }}</div>
              <div class="right_bottom">
                <div class="price" @click="tapGood(twoCateGood)">￥{{ twoCateGood.price }}</div>
                <div class="optionBtn" v-if="twoCateGood.has_option == 1" @click.stop="tapOption(twoCateGood)">
                  <span class="optionBtn_pos" v-if="optionsCheck(twoCateGood.id)">{{ optionsCheck(twoCateGood.id) }}</span>
                  选规格
                </div>
                <div class="optionBtn cricle" v-if="twoCateGood.has_option == 0 && !checkCartJson(twoCateGood)" @click.stop="changeStepper('addOne', twoCateGood.goods_id, '1')">
                  <i class="iconfont icon-life-game-plus"></i>
                </div>
                <template v-if="twoCateGood.has_option == 0 && checkCartJson(twoCateGood)">
                  <van-stepper
                    @focus="changeStepper('focus', checkCartJson(twoCateGood).id, checkCartJson(twoCateGood).total)"
                    @blur="changeStepper('blur', checkCartJson(twoCateGood).id, checkCartJson(twoCateGood).total)"
                    @plus="changeStepper('plus', checkCartJson(twoCateGood).id, checkCartJson(twoCateGood).total)"
                    @minus="changeStepper('minus', checkCartJson(twoCateGood).id, checkCartJson(twoCateGood).total)"
                    :style="{ '--color': `${themeColor}` }"
                    v-model="checkCartJson(twoCateGood).total"
                    theme="round"
                    button-size="20"
                    min="0"
                  />
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <manySpecs :themeColor="themeColor" @updateCart="updateChild" :store_id="store_id" @close="manySpecsClose" v-model="Showspecs" :goodsInfo="manyGood" :carts="cardata.json"></manySpecs>
  </div>
</template>
<script>
// import category from "../../../store/category";
import { debounce } from "lodash";
import manySpecs from "./manySpecs.vue";
export default {
  // props: ["stickyShow", "categoryChild"],
  props: {
    stickyShow: {
      type: Boolean,
      default: false
    },
    categoryChild: {
      type: null
    },
    jumpToPage: {
      type: Function,
      default: () => {}
    },
    themeColor: {
      type: null
    },
    cardata: {
      type: null
    },
    goodsCartsTotal: {
      type: null
    },
    store_id: {
      type: null
    },
    themeColor: {
      type: null
    },
    themeBaseColorOpacity: {
      type: String
    }
  },
  data() {
    return {
      oneInd: 0,
      twoInd: 0,
      category: [],
      list: [],

      listHeight: [],
      twoHeight: [],
      getNextCateGood_Click: true,
      currentSection: null,
      touchStartY: 20,
      clickGoodNum: 0,
      prevScrollTop: 0,
      direction: "",
      timer: null,
      manyGood: [],
      Showspecs: false,
      moreCate: "",
      goodsCartsOld: ""
    };
  },
  components: { manySpecs },
  watch: {
    categoryChild: function(nval, oval) {
      console.log(nval, oval);
      if (nval.length > 0) {
        this.category = nval;
        this.getCateGood();
      }
    }
  },
  computed: {
    optionsCheck(id) {
      return function(id) {
        if (this.goodsCartsTotal[id]) {
          return this.goodsCartsTotal[id].total;
        }
      };
    },
    checkCartJson(item) {
      return function(item) {
        let arrayA = this.cardata.json;
        let arr = [];
        for (let i = 0; i < arrayA.length; i++) {
          if (arrayA[i].goods_id == item.id) {
            arr = arrayA[i];
            break;
          }
        }
        if (arr.length <= 0) {
          return false;
        } else {
          return arr;
        }
      };
    },
    resultOneCateName() {
      console.log(this.category);
      return this.category[this.oneInd].name;
    },
    forTwoId(indx) {
      return function(indx) {
        if (this.twoInd == 0) {
          if (indx == this.twoInd) {
            return true;
          }
        }
        if (indx == this.twoInd) {
          return true;
        } else {
          return false;
        }
      };
    }
  },
  activated() {},
  methods: {
    // 通知更新购物车
    updateChild() {
      this.$emit("updateChild");
    },
    manySpecsClose() {
      this.Showspecs = false;
      this.manyGood = [];
    },
    tapOption(good) {
      this.manyGood = good;
      this.Showspecs = true;
    },
    tapGood(item) {
      this.$emit("tapGood", item.goods_id);
    },
    touchList() {
      if (!this.stickyShow) {
        this.$refs.goodBox_right.scrollIntoView({
          behavior: "smooth"
        });
        return;
      }
    },
    tapMore(id) {
      console.log(id, this.moreCate);
      if (this.moreCate) {
        this.moreCate = "";
        console.log(this.moreCate);
        return;
      }
      let obj = {
        id: id
      };
      this.scrollToSection(obj);
      this.moreCate = id;
      // console.log(this.moreCate,'moreCate')
    },
    //  +  -操作
    updateCartRequest(id, num) {
      $http
        .get(
          "plugin.store-cashier.frontend.shoppingCart.member-cart.updateNum",
          {
            id: id,
            num: num,
            store_id: this.store_id
          },
          "加载中"
        )
        .then(
          response => {
            this.cartPostClick = true;
            if (response.result == 1) {
              this.updateChild();
            } else {
              this.$dialog.alert({ message: response.msg });
            }
          },
          response => {}
        );
    },
    // 首次进入购物车
    addCart(goods, tag, _i) {
      console.log(goods, tag, _i);
      let id = "";
      if (tag === "cart") {
        id = goods.goods_id;
      } else {
        id = goods.id;
      }
      $http
        .get(
          "plugin.store-cashier.frontend.shoppingCart.member-cart.store",
          {
            goods_id: id,
            total: 1,
            store_id: this.store_id,
            option_id: goods.option_id || 0
          },
          "添加中"
        )
        .then(
          response => {
            this.cartPostClick = true;
            if (response.result === 1) {
              console.log("manySpecs请求更新购物车");
              this.updateChild();
              // this.getCart(goods);
            } else {
              this.$dialog.alert({ message: response.msg });
            }
          },
          response => {
            //alert('网络错误，请稍后再试！')
          }
        );
    },
    // 移除购物车
    delItemByCart(cart_id) {
      $http
        .get(
          "plugin.store-cashier.frontend.shoppingCart.member-cart.destroy",
          {
            store_id: this.store_id,
            ids: cart_id.id
          },
          ""
        )
        .then(
          response => {
            if (response.result == 1) {
              this.updateChild();
            } else {
              this.$dialog.alert({ message: response.msg });
            }
          },
          response => {
            //alert('网络错误，请稍后再试！')
          }
        );
    },
    changeStepper(name, id, total) {
      console.log(name, id, total, "dddddddddd");
      if (name == "plus") {
        this.updateCartRequest(id, "1");
      } else if (name == "minus") {
        this.updateCartRequest(id, "-1");
      } else if (name == "addOne") {
        this.addCart({ id }, "");
      } else if (name == "focus") {
        this.goodsCartsOld = total;
      } else if (name == "blur") {
        if (total === 0) {
          this.delItemByCart({ id });
        }
        if (total == "") {
          return;
        } else if (total < this.goodsCartsOld) {
          let lowerNum = `-${this.goodsCartsOld - total}`;
          this.updateCartRequest(id, lowerNum);
        } else if (total > this.goodsCartsOld) {
          let lowerNum = total - this.goodsCartsOld;
          this.updateCartRequest(id, lowerNum);
        } else if (total == this.goodsCartsOld) {
          return;
        }
      }
    },
    // updateCart(json) {
    //   console.log(json,'22222222111111111111111');
    //   if (json.key == "-1") {
    //     // this.changeStepper("minus", json.id);
    //     this.updateCartRequest(json.id,'-1')
    //   } else if (json.key == "1") {
    //     // this.changeStepper("plus", json.id);
    //     this.updateCartRequest(json.id,'1')
    //   } else if (json.key == "add") {
    //     // let obj = {
    //     //   id: json.id,
    //     //   option_id: json.optionsId,
    //     //   total: 1
    //     // };
    //     // this.$emit("addOneSpecs", obj);
    //     let json = { id: json.id, option_id: json.optionsId };
    //     this.addCart(json,"");
    //   } else if(json.key == 'blur') {
    //     this.changeStepper('childBlur', json.id , json.lowerNum )
    //   } else if(json.key == 'del'){
    //     this.changeStepper('delItemByCart',json.id)
    //   }
    // },
    handleTouchEnd(event) {
      // 从子元素上删除touchmove事件监听器
      // this.$refs.goodBox_right.removeEventListener("touchmove", this.handleTouchMove);
    },
    handleTouchMove: debounce(function(event) {
      // 获取当前滚动高度
      const scrollTop = event.target.scrollTop;
      // 调用父组件方法跳转页面
      this.jumpToPage(scrollTop);
    }, 300),
    handleTouchMove: debounce(function(event) {
      if (this.stickyShow && !this.moreCate) {
        let child = this.$refs.goodBox_right;
        let scrollTop = child.scrollTop;
        // let scrollHeight = child.scrollHeight;
        let height = child.offsetHeight;
        let distance = event.touches[0].clientY - this.startY;
        document.body.style.overflow = "hidden";
        this.$refs.goodBox_right.style.overflow = "auto";
        if (distance < this.touchStartY) {
          // console.log("向上滑动");
        } else if (distance > -this.touchStartY) {
          // console.log("向下滑动");
          if (scrollTop + height <= height) {
            console.log("向下滑动,滑动到顶部了");
            // 调用父组件方法跳转页面
            document.body.style.overflow = "auto";
            this.jumpToPage(scrollTop);
          }
        }
      }
    }, 300),
    handleTouchStart(event) {
      this.startY = event.touches[0].clientY;
      if (this.stickyShow) {
        document.body.style.overflow = "hidden";
        if (this.moreCate) {
          this.$refs.goodBox_right.style.overflow = "hidden";
        } else {
          this.$refs.goodBox_right.style.overflow = "auto";
        }
      } else {
        document.body.style.overflow = "auto";
        this.$refs.goodBox_right.style.overflow = "hidden";
      }
    },
    async fnHandleScroll(event) {
      await this.getBoxHeight();
      // 容器盒子
      let containerBox = this.$refs.goodBox_right.getBoundingClientRect();
      // console.log(document.querySelectorAll(".topHead")[0].offsetHeight, "topHead");
      // console.log(containerBox.top, "容器盒子");
      let headTopHeight = document.querySelectorAll(".topHead")[0].offsetHeight;
      // 需要对比箱子元素
      let sections = this.$refs.twoCateRefs;
      let posA = this.$refs.posA;
      let current = "";
      sections.forEach((section, ind) => {
        let section_top = section.getBoundingClientRect().top;
        if (section_top - posA[0].offsetHeight - headTopHeight < 0) {
          current = section.id;
        }
      });
      // console.log(current, "current");
      // if (current !== this.currentSection) {
      //   await this.pGetCurrent(current);
      // }
      this.twoInd = await this.pGetCurrent(current);
      let container = this.$refs.goodBox_right;

      this.prevScrollTop = container.scrollTop;
      if (this.category[this.oneInd].has_many_children.length - 1 < this.twoInd) {
        //一级切换过度中
        if (this.category[this.oneInd].has_many_children.length) {
          this.twoInd = 0;
        }
        return;
      }
      // console.log("查看是否还有下一个一级", this.category.length - 1, this.oneInd, this.direction);
      if (this.category[this.oneInd].has_many_children.length - 1 == this.twoInd) {
        // console.log("是当前一级中的最后一个二级,切换一级分类下的第一个二级", this.category[this.oneInd + 1]);
        if (this.clickGoodNum >= 20) this.clickGoodNum = 0;
        // console.log(this.category.length - 1, this.oneInd);
        if (this.category.length - 1 == this.oneInd) {
          let addOneNext = this.oneInd;
          let addNext = 0;
          let add = this.category[addOneNext].has_many_children[addNext];
          // console.log("当前是最后一个一级了", this.category[addOneNext].has_many_children[addNext]);
          this.getNextCateGood(add.id, addNext, addOneNext);
        } else {
          let addOneNext = this.oneInd + 1;
          let addNext = 0;
          let add = this.category[addOneNext].has_many_children[addNext];
          // console.log("还有下一个一级", this.category[addOneNext].has_many_children[addNext]);
          this.getNextCateGood(add.id, addNext, addOneNext);
        }
        return;
      }
      if (this.clickGoodNum >= 20) this.clickGoodNum = 0;
      this.getNextCateGood(this.category[this.oneInd].has_many_children[this.twoInd + 1].id, this.twoInd + 1);
    },
    pGetCurrent(current) {
      return new Promise((resolve, reject) => {
        let category = this.category;
        for (let i = 0; i < category.length; i++) {
          for (let k = 0; k < category[i].has_many_children.length; k++) {
            if (category[i].has_many_children[k].id === Number(current)) {
              console.log("二级的下标", k);
              resolve(k);
              break;
            }
          }
        }
      });
    },
    observeSections() {
      const options = {
        root: null,
        rootMargin: "0px",
        threshold: 0.5
      };
      const observer = new IntersectionObserver(this.onIntersection, options);
      const sections = this.$el.querySelectorAll(".cateGood");
      sections.forEach(section => {
        observer.observe(section);
      });
    },
    onIntersection(entries, observer) {
      entries.forEach((entry, ind) => {
        // const firstVisibleTarget = entries.find(entry => entry.isIntersecting);
        // console.log(firstVisibleTarget);
        if (entry.isIntersecting) {
          // console.log(firstVisibleTarget);
          // console.log(entry);
          this.currentSection = entry.target.id;
        }
      });
    },
    scrollToTwoCate(item, indx, indexOne) {
      let sections = this.$el.querySelectorAll(".cateGood");
      let category = this.category;
      for (let i = 0; i < sections.length; i++) {
        if (category[indexOne].has_many_children[indx].id == Number(sections[i].id)) {
          this.$refs.goodBox_right.scrollTo(0, document.getElementById(`${category[indexOne].id}`).offsetTop + sections[i].offsetTop - this.$refs.posA[0].offsetHeight + 2);
          this.moreCate = "";
        }
      }
    },
    async scrollToSection(item) {
      let sections = this.$refs.showCate;
      let el, ind;
      for (let i = 0; i < sections.length; i++) {
        if (item.id == Number(sections[i].id)) {
          console.log(sections[i].querySelectorAll(".cateGood")[0]);
          el = sections[i].querySelectorAll(".cateGood")[0];
          ind = i;
          break;
        }
      }
      if (this.category[ind].has_many_children[0] && !this.category[ind].has_many_children[0].good) {
        // this.$toast.loading({
        //   duration: 0, // 持续展示 toast
        //   message: "加载中",
        //   forbidClick: true
        // });
        //当前一级分类下面没有加载商品
        console.log("当前一级分类下面没有加载商品", this.category[ind], this.category.length, ind);

        if (!this.category[ind].has_many_children[0].good) {
          if (this.clickGoodNum >= 20) this.clickGoodNum = 0;
          let addOneNext = ind;
          let addNext = 0;
          let add = this.category[addOneNext].has_many_children[addNext];
          await this.getNextCateGood(add.id, addNext, addOneNext, el);
          console.log("跳转到指定一级分类", this.category, ind);
        }
      } else {
        // el.scrollIntoView({
        //   behavior: "auto"
        // });
        this.$refs.goodBox_right.scrollTo(0, document.getElementById(`${this.category[ind].id}`).offsetTop + el.offsetTop - this.$refs.posA[0].offsetHeight + 2);
      }
    },
    getBoxHeight() {
      this.listHeight = [];
      let rightItems = this.$refs.showCate; //获取指定类名的所有元素
      let height = 0;
      this.listHeight.push(height);
      for (let i = 0; i < rightItems.length; i++) {
        let item = rightItems[i]; // 右边的每一个模块（蓝色标题 + 标题下面所带的内容）
        height += item.clientHeight;
        this.listHeight.push(height); // 把右边模块内容的高度全都放到一个数组中
      }
      for (let i = 0; i < this.listHeight.length; i++) {
        if (this.$refs.goodBox_right.scrollTop < this.listHeight[i]) {
          this.oneInd = i - 1;
          break;
        }
      }
    },
    fnThrottle(event) {
      // this.throttle(this.fnHandleScroll(), 500)();
      this.fnHandleScroll(event);
    },
    throttle(fn, delay) {
      let last = 0;
      return function(...args) {
        const now = new Date().getTime();
        if (now - last < delay) {
          return;
        }
        last = now;
        fn(...args);
      };
    },
    getCateGood() {
      return new Promise((resolve, reject) => {
        $http
          .post(
            "plugin.chain-store.frontend.controller.index.category-goods",
            {
              category_id: this.category[this.oneInd].has_many_children[this.twoInd].id,
              store_id: this.store_id,
              no_page: true
            },
            "加载中"
          )
          .then(response => {
            if (response.result === 1) {
              this.observeSections();
              this.$set(this.category[this.oneInd].has_many_children[this.twoInd], "good", response.data.list);
              console.log("二级索引", this.twoInd, "二级数组", this.category[this.oneInd].has_many_children);
              this.twoHeight = [];
              // 如果二级索引是第一个，并且二级分类不止有一个，并且二级商品少于10个的情况下，需要获取请求下一个二级分类的商品
              if (this.twoInd == 0 && this.category[this.oneInd].has_many_children.length > 1 && this.category[this.oneInd].has_many_children[this.twoInd].good.length < 10) {
                let addNext = this.twoInd + 1;
                let add = this.category[this.oneInd].has_many_children[addNext];
                this.getNextCateGood(add.id, addNext);
                return;
              }
              if (this.category[this.oneInd].has_many_children.length - 1 == this.twoInd && this.category.length - 1 > this.oneInd) {
                let addOneNext = this.oneInd + 1;
                let addNext = 0;
                let add = this.category[addOneNext].has_many_children[addNext];
                this.getNextCateGood(add.id, addNext, addOneNext);
                return;
              }
              resolve(true);
            } else {
              this.$toast(response.msg);
            }
          })
          .catch(err => {
            console.error(err, "app");
          });
      });
    },
    /**
     * cateId { 需要加载商品的二级分类id }
     * isTwoInd { 所加载的二级索引 }
     * isOneInd { 所加载的一级索引 }
     */
    async getNextCateGood(cateId, isTwoInd, isOneInd = this.oneInd, callback) {
      // console.log(this.clickGoodNum, "clickGoodNum");
      if (this.clickGoodNum >= 20) return;
      if (!this.getNextCateGood_Click) return;
      this.getNextCateGood_Click = false;
      if (this.category[isOneInd].has_many_children[isTwoInd] && this.category[isOneInd].has_many_children[isTwoInd].good) {
        this.getNextCateGood_Click = true;
        return;
      }
      // console.log("dasdasdasd");
      $http
        .post("plugin.chain-store.frontend.controller.index.category-goods", {
          category_id: cateId,
          store_id: this.store_id,
          no_page: true
        })
        .then(response => {
          if (response.result === 1) {
            this.getNextCateGood_Click = true;
            this.$set(this.category[isOneInd].has_many_children[isTwoInd], "good", response.data.list);
            this.clickGoodNum += Number(response.data.list.length);

            // // 并且二级分类不止有一个，并且二级商品少于10个的情况下，需要获取请求下一个二级分类的商品 && this.category[isOneInd].has_many_children[isTwoInd].good.length < 10
            // if (this.category[isOneInd].has_many_children.length - 1 > isTwoInd) {
            //   // 二级分类不止有一个，获取请求下一个二级分类的商品
            //   let addNext = isTwoInd + 1;
            //   let add = this.category[isOneInd].has_many_children[addNext];
            //   console.log(this.clickGoodNum, "dassssssss111");
            //   this.getNextCateGood(add.id, addNext, isOneInd);
            // }

            // // 如果二级索引是当前一级分类最后一个，就需要提前请求下一个一级分类（第一个二级分类的所有商品）
            // console.log(
            //   "如果二级索引是当前一级分类最后一个，就需要提前请求下一个一级分类（第一个二级分类的所有商品）",
            //   this.category[isOneInd].has_many_children.length - 1,
            //   isOneInd,
            //   isTwoInd,
            //   this.category.length
            // );

            // if (this.category[isOneInd].has_many_children.length - 1 == isTwoInd && this.category.length - 1 > isOneInd) {
            //   let addOneNext = isOneInd + 1;
            //   let addNext = 0;
            //   let add = this.category[addOneNext].has_many_children[addNext];
            //   this.getNextCateGood(add.id, addNext, addOneNext);
            // }

            // console.log(this.category[isOneInd].has_many_children.length - 1 > isTwoInd);
          } else {
            this.getNextCateGood_Click = true;
            this.$toast(response.msg);
          }
        })
        .then(() => {
          if (isOneInd > 1) {
            let lasTwo = this.category[isOneInd].has_many_children.length - 1;
            if (this.category[isOneInd - 1].has_many_children[lasTwo]) {
              let addNext = lasTwo;
              let add = this.category[isOneInd - 1].has_many_children[addNext];
              return this.getNextCateGood(add.id, addNext, isOneInd - 1);
            }
          }
        })
        .then(() => {
          if (this.category[isOneInd].has_many_children.length - 1 > isTwoInd) {
            let addNext = isTwoInd + 1;
            let add = this.category[isOneInd].has_many_children[addNext];
            return this.getNextCateGood(add.id, addNext, isOneInd);
          }
        })
        .then(() => {
          if (this.category[isOneInd].has_many_children.length - 1 == isTwoInd && this.category.length - 1 > isOneInd) {
            let addOneNext = isOneInd + 1;
            let addNext = 0;
            let add = this.category[addOneNext].has_many_children[addNext];
            return this.getNextCateGood(add.id, addNext, addOneNext);
            // this.getNextCateGood(add.id, addNext, addOneNext);
          }
        })
        .then(() => {
          if (callback) {
            // this.$refs.goodBox_right.scrollTo(0, callback.offsetTop);
            console.log(callback);
            // this.twoInd = 0;
            // callback.scrollIntoView({
            //   behavior: "auto"
            // });
            this.$refs.goodBox_right.scrollTo(0, document.getElementById(`${this.category[isOneInd].id}`).offsetTop + callback.offsetTop - this.$refs.posA[0].offsetHeight + 2);
          }
        })
        .catch(err => {
          console.error(err, "app");
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.goodBox {
  height: 95vh;
  padding-bottom: 4rem;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: #ffffff;
  .goodBox_right {
    flex: 1;
    height: 100%;
    margin-left: 0.75rem;
    padding-bottom: 10rem;
    .cateGood {
      .isTwoCateName {
        font-size: 0.81rem;
        font-weight: bold;
        color: #3b3b4a;
        margin-bottom: 0.63rem;
        text-align: left;
      }
      .goodList {
        display: flex;
        justify-content: space-between;
        padding-bottom: 0.97rem;
        .left {
          width: 5rem;
          height: 5rem;
          border-radius: 0.5rem;
          flex-shrink: 0;
          margin-right: 0.5rem;
          img {
            width: 100%;
            height: 100%;
            border-radius: 0.5rem;
          }
        }
        .right {
          flex: 1;
          padding: 0.5rem 0;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .right_top {
            font-size: 0.88rem;
            font-weight: 500;
            color: #3b3b4a;
            text-align: left;
            padding-right: 0.41rem;
          }
          .right_bottom {
            display: flex;
            justify-content: space-between;
            padding-right: 0.75rem;
            .van-stepper {
              ::v-deep .van-stepper__minus {
                color: rebeccapurple !important;
                border-color: var(--color) !important;
              }

              ::v-deep .van-stepper__plus {
                background-color: var(--color) !important;
              }
            }
            .price {
              flex: 1;
              font-size: 1rem;
              color: #f15353;
              text-align: left;
            }
            .optionBtn {
              font-size: 0.75rem;
              font-weight: 400;
              color: #ffffff;
              padding: 0.25rem 0.59rem;
              background: var(--themeBaseColor);
              border-radius: 1.56rem;
              position: relative;
              .optionBtn_pos {
                position: absolute;
                right: -0.5rem;
                top: -0.6rem;
                min-width: 1.13rem;
                height: 1.13rem;
                border-radius: 100%;
                background: #fca624;
              }
            }
            .cricle {
              border-radius: 100%;
              width: 1.25rem;
              height: 1.25rem;
              background: var(--themeBaseColor);
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }
    }
    .pos {
      position: sticky;
      top: 0;
      left: 0;
      background: #ffffff;
      z-index: 19;
    }
    .posAll {
      // height: 100vh;
      // background-color: rgba(0,0,0,60%);
      z-index: 100;
    }
    .aPos {
      position: absolute;
      left: 0;
      top: 0;
      height: 100vh;
      width: 100%;
      background-color: rgba($color: #000000, $alpha: 0.6);
      z-index: 99;
    }
    .isSelectOneCate {
      text-align: left;
      padding-top: 0.63rem;
      padding-bottom: 0.63rem;
      font-size: 0.94rem;
      font-weight: bold;
      background: #ffffff;
    }
    .twoFiltrate {
      display: flex;
      // overflow-x: scroll;
      box-sizing: border-box;
      position: relative;
      margin-bottom: 0.63rem;
      background: #ffffff;
    }
    .twoFiltrate_left {
      overflow-x: scroll;
      flex: 1;
      display: flex;
      align-items: flex-start;
    }
    .twoFiltrate_left_PP {
      overflow: hidden;
      flex-wrap: wrap;
    }
    .twoFiltrate_box {
      padding: 0.5rem 0.47rem;
      border-radius: 0.25rem;
      background: #f8f8fb;
      font-size: 0.75rem;
      margin-right: 0.5rem;
      flex-shrink: 0;
    }
    .twoFiltrate_box_PP {
      margin-bottom: 0.325rem;
    }
    .twoFiltrate_box_Select {
      background: var(--colorOpacity);
      color: var(--themeBaseColor);
    }
    .posMoreBtn {
      flex-shrink: 0;
      // flex-shrink: 0;
      width: 2.16rem;
      // height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .twoFiltrate_box:last-child {
      margin-right: 0;
    }
  }
  .goodBox_left {
    flex-shrink: 0;
    width: 5rem;
    background: #fafafa;
    padding-bottom: 5rem;
    height: 100%;
    overflow-y: scroll;
    .oneCate {
      padding: 1.28rem 0.25rem;
      width: 100%;
      font-size: 0.81rem;
      text-align: center;
      box-sizing: border-box;
      .txt {
        position: relative;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
      }
    }
  }
  .dext {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    .twoFiltrate {
      padding-bottom: 0.325rem;
    }
  }
  .dex {
    overflow: hidden;
  }
}
.oneSelect {
  font-weight: 500;
  color: var(--themeBaseColor);
  background: #ffffff;
}
.oneSelect_after::after {
  content: "";
  position: absolute;
  left: -0.25rem;
  top: 0;
  width: 0.19rem;
  height: 100%;
  border-radius: 0.94rem;
  background: var(--themeBaseColor);
}
.twoFiltrate::-webkit-scrollbar {
  // 隐藏进度条
  display: none;
}
.twoFiltrate_left::-webkit-scrollbar {
  // 隐藏进度条
  display: none;
}
.goodBox_right::-webkit-scrollbar {
  display: none;
}
</style>
